<template>
	<el-row class="home" :gutter="20">
		<el-col :span="8" style="margin-top: 20px">
			<el-card class="box-card" shadow="hover">
				<div slot="header" class="clearfix">
					<div class="imginfo">
						<img class="img" :src="userImg" />
					</div>
					<div class="userinfo">
						<p class="username">用户名:</p>
						<p class="name">{{username}}</p>
					</div>
				</div>
				<div class="login-info">
					<p>上次登录时间: <span>{{ currentTime }}</span></p>
					<p>上次登录地点: <span>河北</span></p>
				</div>
			</el-card>
			<div style="margin-top:20px">
				<moon style="height:320px" />
			</div>
		</el-col>
		<el-col style="margin-top: 20px" :span="16">
			<div class="num">
				<echarts class="echarts" />
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import echarts from './echarts.vue'
	import moon from './moon.vue'

	export default {
		components: {
			echarts,
			moon
		},
		name: "home",
		data() {
			return {
				username: '',
				currentTime: '',
				userImg: require("../../src/assets/images/1.jpeg"),
			};
		},
		created() {
			
			this.currentTime = this.getCurrentTime();
		},
    
		methods: {
      
		    getCurrentTime() {
		        //获取当前时间并打印
		      let yy = new Date().getFullYear();
		      let mm = new Date().getMonth()+1;
		      let dd = new Date().getDate();
		      let hh = new Date().getHours();
		      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
		      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
		      let time = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
		        return time;
		
		    }
		},
		mounted() {
			let userInfo = JSON.parse(localStorage.getItem('userIngo'));
			if(userInfo.isLogin){
				this.username = userInfo.name
			}
		}
	};
</script>
<style lang="less" scoped>
	.img {
		width: 150px;
		height: 150px;
		border-radius: 50%;
	}

	.name {
		font-size: 18px;
		color: #000;
		margin-top: 10px;
		margin-left: 50px;
	}

	.username {
		font-size: 18px;
		color: #000;
		margin-top: 50px;
		margin-left: 50px;
	}

	.access {
		color: rgba(0, 0, 0, 0.418);
	}

	.login-info {
		color: rgba(0, 0, 0, 0.418);
	}

	.clearfix {
		width: 300px;
		height: 150px;

	}

	.userinfo {
		width: 150px;
		height: 150px;
		float: right;
	}

	.imginfo {
		width: 150px;
		height: 150px;
		float: left;
	}
</style>
